<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>登录页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<script src="js/plugins/form/jquery.form.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" >
	<link rel="stylesheet" href="/css/reset.css" >
	<link rel="stylesheet" href="/css/login.css" >
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/cam/md5.js"></script>
	<script src="/js/cam/exif.js"></script>
	<script src="/js/cam/cvi_busy_lib.js"></script>
</head>
<body>
<input type="file" capture="camera" accept="image/*" id="imgcamera" name="imgcamera"
	   style="display: none"  onchange="ImgChange(this)">
<!--<img id="img" width="50%"/>-->
<div class="container" >
	<h5>登录</h5>

	<div class="card card-container ">
		<i id="profile-img" class="fa fa-user-circle fa-5x profile-img" ></i>
		<form class="form-signin" id="loginForm" action="/sessions" method="post">
			<input type="email"  name="email" value="chenhui@wolfcode.cn" class="form-control badge-pill" placeholder="邮箱"  >
			<input type="password"  name="password" value="1" class="form-control badge-pill" placeholder="密码" >
			<a href="#" class="forgot-password">
				忘记密码？
			</a>
			<button class="btn btn-lg badge-pill" type="submit" >登录</button>
			<button id="face" class="btn btn-lg badge-pill " type="button" >刷脸登录</button>
		</form>
	</div>


	<a href="register.html" class="registerLink" >
		新用户？点击这里注册
	</a>
</div>
<script>
    //拍照
    function cameraImg() {
        document.getElementById("imgcamera").value = ""; //上传文件时先把file类型input清空下
        $("input[id='imgcamera']").click();
    }
    function ImgChange(imgdata) {
        var _this = imgdata,
            _file = _this.files[0],
            fileType = _file.type;
        console.log(_file.size);
        //图片方向角 added by lzk
        var Orientation = "";
        if (/image\/\w+/.test(fileType)) {
            EXIF.getData(_file, function () {
                EXIF.getAllTags(this);
                Orientation = EXIF.getTag(this, 'Orientation');
            });
            var fileReader = new FileReader();
            fileReader.readAsDataURL(_file);
            fileReader.onload = function (event) {
                var result = event.target.result;   //返回的dataURL
                var image = new Image();
                image.src = result;
                image.onload = function () {  //创建一个image对象，给canvas绘制使用
                    var cvs = document.createElement('canvas');
                    var scale = 1;
                    if (this.width > 1080 || this.height > 1080) {  //1080只是示例，可以根据具体的要求去设定缩放图片大小
                        if (this.width > this.height) {
                            scale = 1080 / this.width;
                        } else {
                            scale = 1080 / this.height;
                        }
                    }
                    cvs.width = this.width * scale;
                    cvs.height = this.height * scale;     //计算等比缩小后图片宽高
                    var ctx = cvs.getContext('2d');
                    ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
                    var imgtmp = new Image();
                    imgtmp.src = cvs.toDataURL(fileType, 0.8);
                    imgtmp.onload = function () {
                        var cvstmp = document.createElement('canvas');
                        var isori = false;
                        if (Orientation != "" && Orientation != 1) {
                            //alert('旋转处理' + Orientation);
                            switch (Orientation) {
                                case 6://需要顺时针（向左）90度旋转
                                    //alert('需要顺时针（向左）90度旋转');
                                    isori = true;
                                    rotateImg(this, 'left', cvstmp);
                                    break;
                                case 8://需要逆时针（向右）90度旋转
                                    //alert('需要顺时针（向右）90度旋转');
                                    rotateImg(this, 'right', cvstmp);
                                    isori = true;
                                    break;
                                case 3://需要180度旋转
                                    //alert('需要180度旋转');
                                    rotateImg(this, 'right', cvstmp);//转两次
                                    rotateImg(this, 'right', cvstmp);
                                    isori = true;
                                    break;
                            }
                        }
                        var newImageData;
                        if (isori)
                            newImageData = cvstmp.toDataURL(fileType, 0.8);   //重新生成图片，fileType为用户选择的图片类型
                        else
                            newImageData = imgtmp.src;
                        var sendData = newImageData.replace("data:" + fileType + ";base64,", '');
                        //  $("#img").attr("src", newImageData); //显示图片
                        var md5str = hex_md5(sendData); //MD5校验
                        uploadImages(sendData, md5str);
                    }
                }
            }
        } else {
            alert("图片类型不正确");
        }
    }
    function rotateImg(img, direction, canvas) {
        //alert(img);
        //最小与最大旋转方向，图片旋转4次后回到原方向
        var min_step = 0;
        var max_step = 3;
        //var img = document.getElementById(pid);
        if (img == undefined) return;
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错
        var height = img.height;
        var width = img.width;
        var step = 2;

        if (direction == 'right') {
            step++;
            //旋转到原位置，即超过最大值
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        var ctx = canvas.getContext('2d');
        //旋转角度以弧度值为参数
        var degree = step * 90 * Math.PI / 180;
        switch (step) {
            case 0:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);
                break;
            case 1:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, 0, -height);
                break;
            case 2:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, -height);
                break;
            case 3:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, 0);
                break;
        }
        return ctx;
    }
    //将图片上传的服务器本地
    function uploadImages(localData, md5str) {
        var xval = getBusyOverlay('viewport', {
            color: 'white',
            opacity: 0.75,
            text: 'viewport: loading...',
            style: 'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white'
        }, {color: '#ff0', size: 100, type: 'o'});
        $.ajax({
            type: "POST",
            url: "/images/faces",
            beforeSend: function () {
                if (xval) {
                    xval.settext("正在上传图片，请稍后......");//此处可以修改默认文字，此处不写的话，就按照默认文字来。
                }
            },
            data: {
                localData: localData,
                md5str: md5str
            },
            dataType: "json",
            timeout: 120000, //超时时间：120秒
            success: function (data) {
                xval.remove(); //此处是移除遮罩层
                if (data.success) {
                    $(document).dialog({
                        titleShow: false,
                        content: "刷脸成功！",
                        onClickConfirmBtn:function () {
							$.get('/sessions',function (data) {
								sessionStorage.setItem("user",JSON.stringify(data.result));
                                window.parent.location.href="/index.html";
                            });
                        }
                    });

                } else {
                    $(document).dialog({
                        titleShow: false,
                        content: "刷脸失败！"
                    });
                }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                xval.remove(); //此处是移除遮罩层
                alert("上传失败！");
            }
        });
    }

    $(function () {
		$("#loginForm").ajaxForm(function (data) {
            if (data.success) {
                //登录时的弹窗设计
                /*$(document).dialog({
                    type : 'toast',
                    infoIcon: '/img/loading.gif',
                    infoText: '正在加载中',
                    autoClose: 500,
					position:'center'
                });*/
                //把后台返回的当前用户存储到sessionStorage中,其内只能存储字符串
				//现将当前用户对象转为字符串存储到sessionStorage,并设置key
                setInterval(function () {
                    sessionStorage.setItem("user",JSON.stringify(data.result));
                    window.parent.location.href="/index.html";
                },500);
            }else{
               $(document).dialog({
				   titleShow:false,
				   content:data.msg
			   });
			}
        });
        $("#face").click(function () {
            cameraImg();
        })

    });
</script>
</body>
</html>
